<template>
  <div class="app-container calendar-list-container">
    <div class="data-list">
      <el-row class="list-content">
        <div>{{$t('scheduleManager.manufacturerTicket.invoiceTitle')}}</div> <!--亿鸿系统科技股份有限公司-->
      </el-row>
      <div class="table_body">
        <div class="table_top">{{$t('scheduleManager.manufacturerTicket.writeInvoiceNoticeOrder')}}</div> <!--工程材料发票开立通知单-->
        <div class="table_list">
          <ul class="bg">
            <li>{{ scheduleManager.noticeDate_name }}</li> <!--通知日期-->
            <li style="width: 45%">{{ invoiceList.noticeDate }}</li>
            <li>{{ scheduleManager.PO_name }}</li> <!--PO单号-->
            <li style="width:40%">{{ invoiceList.poId }}</li>
          </ul>
          <ul class="bg">
            <li>{{ scheduleManager.vendorName_name }}</li> <!--厂商名称-->
            <li style="width: 45%">{{ invoiceList.vendorName }}</li>
            <li>{{ scheduleManager.phone_name }}</li> <!--亿鸿电话-->
            <li style="width:40%">{{ scheduleManager.phone_value }}</li>
          </ul>
          <ul>
            <li class="bg">{{ scheduleManager.vendorLinkman_name }}</li> <!--厂商窗口-->
            <li style="width: 45%">
              <el-select v-model="vendorLinkId" multiple :placeholder="$t('scheduleManager.manufacturerTicket.peleaseSelectHolder')"> <!--请选择-->
                <el-option v-for="item in items" :key="item.id" :label="item.contactPerson" :value="item.id"></el-option>
              </el-select>
            </li>
            <li class="bg">{{ scheduleManager.fax_name }}</li> <!--亿鸿传真-->
            <li class="bg" style="width:40%">{{ scheduleManager.fax_value }}</li>
          </ul>
          <ul class="bg">
            <li>{{ scheduleManager.itemNum }}</li> <!--项次-->
            <li style="width: 45%">{{ scheduleManager.vendorItem_name }}</li> <!--专案发票明细-->
            <li>{{ scheduleManager.amount_name }}</li> <!--请款金额-->
            <li>{{ scheduleManager.tax_name }}</li> <!--营业税(5%)-->
            <li>{{ scheduleManager.total_name }}</li> <!--总计-->
          </ul>

          <ul v-for="(single, i) in invoiceList.invoiceItems" :key="i">
            <li class="bg">{{ i + 1 }}</li>
            <li style="width: 45%">
              <el-input size="small" :placeholder="$t('placeholder.content')" v-model="single.description"></el-input>
            </li>
            <li v-check-submit tabindex="0">
              <el-input style="display: none" type="number" size="small" :placeholder="$t('placeholder.content')" v-model="single.amount" @change="selectList"></el-input>
              <div class="box" v-format="'$#,##0_);($#,##0)'" :placeholder="$t('placeholder.content')">{{ single.amount }}</div>
            </li>
            <li class="bg">
              <div v-format="'$#,##0_);($#,##0)'">{{ single.taxAmount }}</div>
            </li>
            <li class="bg">
              <div v-format="'$#,##0_);($#,##0)'">{{ single.totalAmount }}</div>
            </li>
          </ul>

          <ul class="bg">
            <li style="width:65%">{{ scheduleManager.subTotal }}</li>
            <li style="text-align: right" v-format="'$#,##0_);($#,##0)'">{{ sum.requestPayoutMoneySum }}</li>
            <li style="text-align: right" v-format="'$#,##0_);($#,##0)'">{{ sum.businessTaxSum }}</li>
            <li style="color:red;text-align: right" v-format="'#,##0'">{{ sum.aggregateSum }}</li>
          </ul>
          <ul class="bg">
            <li>{{ scheduleManager.invoiceTitle_name }}</li> <!--发票抬头-->
            <li style="width:80%">{{ scheduleManager.invoiceTitle_value }}</li>
          </ul>
          <ul class="bg">
            <li>{{ scheduleManager.uniformNumber_name }}</li> <!--统一编号-->
            <li style="width:80%">{{ scheduleManager.uniformNumber_value }}</li>
          </ul>
          <ul class="bg">
            <li style="width:100%">{{ scheduleManager.remark}}，
              <span style="color:red">並請於寄送發票正本時附上本通知單，</span>
              <span>謝謝！</span>
            </li>
          </ul>
          <ul class="bg" style="border-bottom: 1px solid #dcdcdc;">
            <li>{{ scheduleManager.receiver }}</li> <!--发票收件人-->
            <!--<li style="width:80%;">{{ invoiceList.receiver }}</li>-->
            <li style="width: 80%">「採購室」</li>
          </ul>
        </div>
      </div>
    </div>
    <div class="data-bnt">
      <div>
        <el-button class="yt-btn-ys" type="primary" @click="save">{{$t('scheduleManager.manufacturerTicket.sendEmail')}}</el-button> <!--发送Email通知-->
        <el-button class="yt-btn" type="primary" @click="getBack">{{$t('scheduleManager.manufacturerTicket.cancel')}}</el-button> <!--取消-->
      </div>
    </div>
  </div>
</template>

<script>
  import {
    getListByVendorNo,
    selectProjectPaymentByVendorPoNo,
    save
  } from '@/api/scheduleManager/manufacturerTicket';
  export default {
    name: 'manufacturerTicket',
    components: {
      'dict-select': () => import('@/components/Dict/dictValueSelect')
    },
    data() {
      return {
        scheduleManager: this.$store.getters.allMapDic.invoice,
        allName: '', // 厂商全称
        vendorLinkId: [],
        invoiceList: {
          noticeDate: null, // 通知日期
          poId: null, // PO单号
          vendorName: null, // 厂商名称
          phone: '+886-2-6617-5186', // 亿鸿电话
          vendorLinkman: '', // 厂商窗口
          fax: '+886-2-2792-8809', // 亿鸿传真
          invoiceItems: [
            {
              num: null, // 项次
              description: null, // （专案）发票明细
              amount: null, // 请款金额
              taxAmount: null, // 营业税
              totalAmount: null // 统计
            }
          ],
          invoiceTitle: null, // 发票抬头
          uniformNumber: '28830463', // 统一编号
          remark: null, // 备注PS
          receiver: null // 发票收件人
        },
        items: [],
        selectedValue: '',
        list: [
          {
            detail: null,
            requestPayoutMoney: null,
            businessTax: null,
            aggregate: null
          }
        ],
        sum: {
          requestPayoutMoneySum: null,
          businessTaxSum: null,
          aggregateSum: null
        }
      };
    },
    methods: {
      selectList() {
        this.sum = {
          requestPayoutMoneySum: null,
          businessTaxSum: null,
          aggregateSum: null
        };
        this.invoiceList.invoiceItems.forEach((key, i) => {
          this.$set(
            this.invoiceList.invoiceItems[i],
            'taxAmount',
            Math.round(this.invoiceList.invoiceItems[i].amount * 0.05)
          );
          this.$set(
            this.invoiceList.invoiceItems[i],
            'totalAmount',
            Number(this.invoiceList.invoiceItems[i].amount) +
              Number(this.invoiceList.invoiceItems[i].taxAmount)
          );
          this.sum.requestPayoutMoneySum += Number(key.amount);
          this.sum.businessTaxSum += Number(key.taxAmount);
          this.sum.aggregateSum += Number(key.totalAmount);
        });
      },
      save() {
        console.log(this.invoiceList.vendorLinkman)
          console.log(this.vendorLinkId)
        // 设置发送人、邮箱
        this.invoiceList.receiverEmail ='';
        this.invoiceList.vendorLinkman ='';
        if (this.vendorLinkId && this.vendorLinkId.length > 0) {
          for (let i = 0; i < this.items.length; i++) {
            for (let j = 0; j < this.vendorLinkId.length; j++) {
              if (this.items[i].id === this.vendorLinkId[j]) {
                if (this.invoiceList.receiverEmail) {
                  this.invoiceList.receiverEmail = this.items[i].email + ',' + this.invoiceList.receiverEmail;
                } else {
                  this.invoiceList.receiverEmail = this.items[i].email
                }
                if (this.invoiceList.vendorLinkman) {
                  this.invoiceList.vendorLinkman = this.items[i].contactPerson + ',' + this.invoiceList.vendorLinkman;
                } else {
                  this.invoiceList.vendorLinkman = this.items[i].contactPerson
                }
              }
            }
          }
        }
        
        // 设置付款作业id
        this.invoiceList.projectPaymentId = this.$route.query.queryId
        const a = this.invoiceList;

        if (!this.invoiceList.receiverEmail) {
          console.info(1111)
          this.$notify({
            title: this.$t('scheduleManager.manufacturerTicket.fail'), // 失败
            message: this.$t('scheduleManager.manufacturerTicket.selectVendorWindowTips'), // 您还未选择厂商窗口
            type: 'warning'
          });
          return;
        }

        // 发票明细进行字段长度进行检验 不能超过100
        const f = a.invoiceItems;
        if (a && f) {
          for (let i = 0; i < f.length; i++) {
            const g = f[i];
            if (g.description && g.description.length > 100) {
              this.$notify({
                title: this.$t('scheduleManager.manufacturerTicket.fail'), // 失败
                message: this.$t('scheduleManager.manufacturerTicket.tips1'), // 「(專案)發票明細」字數超過限制，請修改後再發送。（字數限制：中文xx字元以下）
                type: 'warning'
              });
              return
            }
          }
        }
        save(a).then(res => {
          this.$notify({
            title: res.status === 200 ? this.$t('scheduleManager.manufacturerTicket.success') : this.$t('scheduleManager.manufacturerTicket.fail'), // '成功' : '失败'
            message: res.status === 200 ? this.$t('scheduleManager.manufacturerTicket.success') : this.$t('scheduleManager.manufacturerTicket.fail'), // '成功' : '失败'
            type: res.status === 200 ? 'success' : 'warning'
          });

          if (res.status === 200) {
            this.$store.dispatch('delVisitedViews', this.$route) // 关闭当前页
            const str = '/progressManager/worksDetails'
            this.$store.getters.pageState[str] = {}
            this.$router.push({ // 跳回详情页面
              path: '/progressManager/worksDetails',
              query: { progressId: this.$route.query.projectProgressId }
            });
          }
        });
      },
      getBack() {
        this.$router.go(-1);
      }
    },
    mounted() {
      console.log(this.$store.getters.allMapDic.invoice, 2222)
      const obj = {
        id: this.$route.query.queryId,
        vendorNo: this.$route.query.vendorNo,
        projectProgressId: this.$route.query.projectProgressId
      };
      getListByVendorNo(obj).then(res => {
        this.items = res.data;
      });
      const objPoNo = {
        vendorPoNo: this.$route.query.vendorPoNo,
        projectPaymentId: this.$route.query.queryId,
        projectProgressId: this.$route.query.projectProgressId
      };
      selectProjectPaymentByVendorPoNo(objPoNo).then(res => {
        res.data.invoiceItems.forEach(key => {
          JSON.stringify(key);
        });
        // res.data.vendorName = res.data.vendorName ? res.data.vendorName : this.$route.query.vendorName
        // res.data.poId = this.$route.query.vendorPoNo.substr(0, 13)
        // res.data.phone = '+886-2-6617-5186'
        // res.data.fax = '+886-2-2792-8809'
        // res.data.invoiceTitle = this.$t('scheduleManager.manufacturerTicket.invoiceTitle') // 亿鸿系统科技股份有限公司
        // res.data.uniformNumber = '28830463'
        // res.data.remark = 'PS. 一张发票开立通知单，请开一张发票，谢谢。' // PS. 一张发票开立通知单，请开一张发票，谢谢。
        this.invoiceList = res.data;
        this.selectList();
      });
      // console.log(this.$store.getters.allDic.invoice);
    }
  };
</script>
<style scoped lang="scss">
  /deep/ .data-list {
    border: none;
    margin: 0;

    .list-content {
      margin: 0;
      text-align: center;
      color: #212121;
    }

    .table_body {
      padding: 0 10%;
      text-align: center;

      .table_top {
        padding-top: 20px;
      }

      .table_list {
        padding: 22px 0 32px 0;

        ul {
          border-left: 1px solid #dcdcdc;
          border-top: 1px solid #dcdcdc;
          width: 100%;
          padding: 0;
          display: flex;
          margin: 0;

          li {
            text-align: center;
            list-style: none;
            min-height: 40px;
            border-right: 1px solid #dcdcdc;
            width: 20%;
            color: #212121;
            font-family: PingFang SC;
            font-size: 14px;
            padding: 0 5px;
            box-sizing: border-box;
            display: flex;
            justify-content: center;
            align-items: center;
          }
        }
      }
    }
  }
  .data-bnt {
    text-align: center;
  }
  .box{
    border: 1px solid #d9d9d9;
    padding: 0 15px !important;
    height: 36px;
    line-height: 36px;
    text-align: left;
    border-radius: 4px;
    color: #333;
    width: 100%;
    cursor:text;
  }
  .box:empty:before{
    content: attr(placeholder);
    color: #c0c4cc;
    font-size: 12px;
  }
</style>
